<template>
    <section v-cloak>
        <a-card>
            <c-form
                ref="form"
                :model="formModel"
                :initModel="initModel"
                :fields="fields"
                labelWidth="110px"
                :span="8"
            >
            </c-form>
        </a-card>
        <a-space>
            <a-button @click="handleSubmit">submit</a-button>
            <a-button @click="handleReset">reset</a-button>
            <a-button
                type="primary"
                @click="handleChangeImage"
                >change image</a-button
            >
            <c-button
                type="primary"
                :beforeClick="handleBeforeClick"
                icon="create"
            >
                c-button
            </c-button>
            <div class="text-20 flex items-center">
                我是404
                <icon
                    name="404"
                    class="text-purple"
                />
            </div>
            <div
                @click="handleMessage"
                type="outline"
            >
                reset
            </div>
        </a-space>
        <div>
            {{ formModel }}
        </div>
    </section>
</template>

<script setup lang="tsx">
import { useFormConfig } from './formConfig'
import { Message } from '@arco-design/web-vue'

const { formEl, formModel, fields, initModel } = useFormConfig()

setTimeout(() => {
    ;(formModel.fileList = [
        'https://drug-platform.cdn.bcebos.com/online/drug/d1689948080778174209.png',
        'https://drug-platform.cdn.bcebos.com/online/drug/d1689951372085512039.png',
        'https://drug-platform.cdn.bcebos.com/online/drug/d1689951398547482543.png'
    ]),
        (formModel.startTime = '2024-09-08'),
        (formModel.endTime = '2024-09-20')
    formModel.price = 1
}, 1500)

const handleChangeImage = () => {
    formModel.fileList = []
}

const handleSubmit = async () => {
    const data = await formEl.value!.getFormValue()
    // eslint-disable-next-line
    console.log('🚀 ~ data:', data)
}

const handleReset = () => {
    formEl.value?.reset()
}

const handleBeforeClick = (): Promise<boolean> => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(true)
        }, 4000)
    })
}

const handleMessage = () => {
    Message.success({
        content: '重置成功'
    })
}
</script>
